import { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { useCSS2D } from './CSS2DReactObject';

export const CSS2DInputWrapper = ({ children }) => {
  const id = useRef(Math.random().toString() + Date.now());
  const { onAddWrapper, onRemoveWrapper, element } = useCSS2D();

  useEffect(() => {
    onAddWrapper(id.current);

    return () => {
      onRemoveWrapper(id.current);
    };
  }, []);

  return element.current && createPortal(children, element.current, id.current);
};
